<template>
	<div>
		<div class='place-foot'></div>
		<!--<div class='iphonex-bar' wx:if="{{isIPhoneX}}"></div>-->
		<div class='fixed-footer'>
			<div class='footer-content'>
				<span class='total-prices'>￥{{orderDetail.order_amount}}</span>
				<div :class='orderDetail.order_state == 0 ? "gary" :"go-buy-btn"  ' @click='toPay'>{{orderDetail.count_down_text ? orderDetail.count_down_text : "订单失效"}}</div>
			</div>
			<!--<div class='iphonex-bar' wx:if="{{isIPhoneX}}"></div>-->
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapState, mapMutations } from 'vuex';
	import { Toast, MessageBox } from 'mint-ui';
	import server from '@/server/api';
	
	let cleanCountDown;
	export default {
		props: ["isUseWallet"],
		data() {
			return {
				orderDetailText: null,
				clearId: null,
				cleanCountDown: null
			}
		},
		mounted() {
			this.countDownTime()
		},
		computed: {
			...mapState(['orderDetail'])
		},
		methods: {
			countDownTime() {
				const _this = this;
				var hour = 0,
					minute = 0,
					second = 0,
					count_down_text = ''; //时间默认值
				let countTime = _this.orderDetail.count_down;
				let orderDetail = _this.orderDetail
				
				if(countTime == undefined) {
					_this.$set(_this.orderDetail, "count_down_text", '订单失效');
					_this.$set(_this.orderDetail, "order_state", 0);
				
					return;
				}

				// countDownTime
				if(countTime > 0) {
					hour = parseInt(countTime / (60 * 60)) + '';
					minute = parseInt((countTime - hour * 60) / 60) + '';
					second = countTime % 60 + '';
					countTime -= 500;
					if(hour > 0) {
						count_down_text += hour + "时";
					}
					if(second < 10) {
						second = "0" + second;
					}
					count_down_text += minute + "分钟" + second + "秒";
					_this.$set(_this.orderDetail, "count_down", countTime);
					_this.$set(_this.orderDetail, "count_down_text", count_down_text + '立即支付');

				} else {
					_this.$set(_this.orderDetail, "count_down_text", '订单失效');
					_this.$set(_this.orderDetail, "order_state", 0)
				}
				_this.cleanCountDown = setTimeout(function() {
					_this.countDownTime()
				}, 1000);

				if(_this.orderDetail.count_down < 0) {
					_this.$set(_this.orderDetail, "count_down_text", '订单失效');
					_this.$set(_this.orderDetail, "order_state", 0)
					clearTimeout(_this.cleanCountDown)
					return;
				};
			},
			toPay() {
				const _this = this;
				let param = {
					member_id: 101076,
					address_id: _this.orderDetail.address.daddress_id,
					all_no: _this.orderDetail.all_no,
					order_label:  _this.orderDetail.order_label,
					openid: "oGEpG4-UFfHoa_EXCuryj31Z20-Y"
				};

				if(_this.isUseWallet) {
					param.is_wallet = 2;
					MessageBox.confirm('确定执行此操作?').then(action => {
						_this.applyPay(param);
					});
					//					wx.showModal({
					//						title: '提示',
					//						content: '您将使用钱包支付',
					//						success: function(res) {
					//							if(res.confirm) {
					//								applyPay(param);
					//							} else {
					//								tool.warning("支付失败");
					//								wx.navigateTo({
					//									// url: '/pages/container/order-details/order-details?all_no=' + orderInfo.all_no+"&order_label="+ orderInfo.order_label,
					//									url: '/pages/container/order-details/goods-to-pay/goods-to-pay?all_no=' + orderInfo.all_no + "&order_label=" + orderInfo.order_label
					//								});
					//							}
					//						}
					//					});
				} else {
					param.is_wallet = 1;
					_this.applyPay(param);
				}
			},
			applyPay(param) {
				const _this = this;
				server.post("/index/Wxpay/index", param, function(res) {

					if(res.error != 0) {
						Toast(res.message);
						return;
					}
					if(res.data.order_state == 20 || res.data.data.judge == 1) {
						Toast({
							message: '支付成功',
							iconClass: 'mint-toast-icon mintui mintui-success',
							duration:1000
						});
						setTimeout(function() {
							_this.$router.push("/order");
							//							wx.switchTab({
							//								// url: '/pages/container/order-details/order-details?all_no=' + param.all_no + "&order_label=" + param.order_label
							//								url: '/pages/container/order-list/order-list'
							//							});
						}, 1000);
						return;
					}
					_this.$store.state.paymentDetail = res.data;
					_this.$router.push("/payment");
				});
			}
		},
		watch: {}
	}
</script>

<style scoped>
	.fixed-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		box-shadow: -6px -6px 20px 0 rgba(69, 69, 83, 0.05);
	}
	
	.place-foot {
		height: 112px;
	}
	
	.footer-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 112px;
		padding: 0 40px;
	}
	
	.footer-content .total-prices {
		font-size: 42px;
		color: #454553;
	}
	
	.footer-content .go-buy-btn {
		height: 74px;
		padding: 0 20px;
		background-image: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
		text-align: center;
		line-height: 74px;
		color: #fff;
		font-size: 28px;
		box-shadow: 0 20px 20px 0 rgba(244, 63, 92, 0.15);
		border-radius: 8px;
	}
	
	.footer-content .gary {
		height: 74px;
		padding: 0 20px;
		background-color: #f8f8f8;
		text-align: center;
		line-height: 74px;
		color: #67666B;
		font-size: 28px;
		border-radius: 8px;
	}
</style>